<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="../plugin/jquery-easyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../plugin/jquery-easyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../plugin/jquery-easyUI/demo.css">
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../plugin/jquery-easyUI/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'north'" style="height:50px">
        <h2 style="margin-left:50px;margin-top:10px;">建材租赁系统</h2>
    </div>
    <div data-options="region:'west',split:true" title="菜单" style="width:15%;">
        <div style="padding:5px 0;">
            <a href="/Lease/html/customer.html" class="easyui-linkbutton" >客户管理</a><br>
            <a href="/Lease/html/index.html" class="easyui-linkbutton">订单管理</a><br>
            <a href="/Lease/html/statistics.html" class="easyui-linkbutton">统计</a><br>
        </div>
    </div>
    <div data-options="region:'center'",style="width:85%;">
        <table id="dg" title="客户信息" class="easyui-datagrid" style="width:100%;height:100%;"
               url="/Lease/customer.htm"
               toolbar="#toolbar" pagination="true"
               rownumbers="true" fitColumns="true" singleSelect="true">
            <thead>
            <tr>
                <th field="name" width="50">姓名</th>
                <th field="phone" width="50">电话号码</th>
                <th field="address" width="50">地址</th>
                <th field="remark" width="50">备注</th>
            </tr>
            </thead>
        </table>
        <div id="toolbar">
            <span>姓名</span>
            <input id="search" style="line-height:23px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"onclick="editUser()">修改</a>
        </div>
        <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
             closed="true" buttons="#dlg-buttons">
            <div class="ftitle">客户信息</div>
            <form id="fm" method="post" novalidate>
                <div class="fitem">
                    <label>姓名</label>
                    <input name="name" class="easyui-textbox" required="true">
                </div>
                <div class="fitem">
                    <label>电话号码</label>
                    <input name="phone" class="easyui-textbox" type="number">
                </div>
                <div class="fitem">
                    <label>地址</label>
                    <input name="address" class="easyui-textbox">
                </div>
                <div class="fitem">
                    <label>备注</label>
                    <input name="remark" class="easyui-textbox">
                </div>
            </form>
        </div>
        <div id="dlg-buttons">
            <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()"
               style="width:90px">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
               onclick="javascript:$('#dlg').dialog('close')" style="width:90px">退出</a>
        </div>
        <script type="text/javascript">
            var url;
            function newUser(){
                $('#dlg').dialog('open').dialog('center').dialog('setTitle','新增客户信息');
                $('#fm').form('clear');
                url = '/Lease/saveCustomer.htm';
            }
            function editUser(){
                var row = $('#dg').datagrid('getSelected');
                if (row){
                    $('#dlg').dialog('open').dialog('center').dialog('setTitle','修改客户信息');
                    $('#fm').form('load',row);
                    url = '/Lease/editCustomer.htm?id='+row.id;
                    alert(url);
                }
            }
            function saveUser(){
                $('#fm').form('submit',{
                    url: url,
                    onSubmit: function(){
                        return $(this).form('validate');
                    },
                    success: function(result){
                        if (result == "fail"){
                            $.messager.show({
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        } else {
                            $('#dlg').dialog('close');        // close the dialog
                            $('#dg').datagrid('reload');    // reload the user data
                        }
                    }
                });
            }
            function doSearch(){
                $("#dg").datagrid("load",{
                    name:$("#search").val()
                });
            }
        </script>
        <style type="text/css">
            #fm{
            margin:0;
            padding:10px 30px;
            }
            .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
            }
            .fitem{
            margin-bottom:5px;
            }
            .fitem label{
            display:inline-block;
            width:80px;
            }
            .fitem input{
            width:160px;
            }
        </style>
    </div>
</div>

</body>
</html>